<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示，false隐藏 -->
      <!-- 区别：
          v-if通过控制dom来控制元素的显示和隐藏
          v-show通过控制样式display:none来控制元素的显示与隐藏
          使用场景区别
          1. 涉及到大量dom操作的时候，我们需要使用v-show
          2. 涉及到异步数据渲染的时候就要使用v-if
       -->
      <h1>v-if</h1>
      <!-- v-if通过操作DOM实现元素的显示和隐藏 会造成浏览器的重排 -->
      <!-- 如果元素初始状态是隐藏 而且不会有频繁显示隐藏切换 我们最好使用v-if -->
      <p v-if="isVisible">aaaa</p>
      <!-- v-show是通过操作样式实现元素的显示和隐藏 会触发浏览器的重绘-->
      <!-- 如果元素涉及到频繁的显示隐藏切换 我们最好用v-show -->
      <h1>v-show</h1>
      <p v-show="isVisible">bbbb</p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          isVisible: false
        }
      })
    </script>
  </body>
</html>